<template>
  <div>
	
	<myheader></myheader>
	<!-- 面包屑导航 -->
	<Breadcrumb :datas = 'datas'></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			<table>
				<tr>
					<td style="padding:5px;">
						用户名：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="username">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						密码：
					</td>
					<td style="padding:5px;">
						<input type="password" v-model="password">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						
					</td>
					<td style="padding:5px;">
						<!-- 滑块验证码 -->
						<drag-verify
							:width = 'width'
							:height = 'height'
							:text = 'text'
							ref = 'Verify'
						>
						</drag-verify>
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						
					</td>
					<td style="padding:5px;">
						<Button @click="submit" color='blue'>登录</Button>
						&nbsp;&nbsp;
						<img style="cursor:pointer;" src="http://127.0.0.1:8000/static/sina.png" @click="sina">
						&nbsp;&nbsp;
						<img style="cursor:pointer;" src="http://127.0.0.1:8000/static/dingding.png" @click="dingding">
					</td>
				</tr>
			</table>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

// 导包
import myheader from './myheader'
import myfooter from './myfooter'
import dragVerify from 'vue-drag-verify'
import {config, formatXml} from '../config'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  // 声明面包屑导航
	  datas: [{title: '首页', route: {name: 'index'}}, {title: '登录页面'}],
	  username: '',
	  password: '',
	  // 滑块验证码
	  text: '请将滑块滑动到最右侧',
	  width: 300,
	  height: 40,
    }
  },

  // 注册组件
  components: {
	  'myheader': myheader,
	  'myfooter': myfooter,
	  dragVerify
  },

  mounted:function(){

   
  
  },
  methods:{
	  // 新浪微博登录
	  sina: function () {
		// console.log(config['baseurl']);
		// console.log(formatXml('hello'));

		// 组装url
		let url = "https://api.weibo.com/oauth2/authorize?client_id=470406121&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";

		// 进行跳转
		window.location.href = url;
	  },
	  
	  // 钉钉登录
	  dingding(){
		let appid = 'dingoahmelrgy51wltnjzs';
		let redirect_uri = 'http://localhost:8000/dingding_back/';
		
		// 组装url
		let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;
		
		// 进行跳转
		window.location.href = url;
	  },

	  // 刷新验证码
	  change_img: function () {
		// 随机字符串
		var num = Math.ceil(Math.random()*10);
		// 赋值地址
		this.src = this.src + '?code=' +num;  
	  },

	  // 重置
	  reset: function () {
		this.username = ''
		this.password = ''
		this.code = ''
	  },

	  // 提交
	  submit: function () {
		  // 验证是否拖动
		  console.log(this.$refs.Verify.isPassing);

		  if(this.username == ''){
			  this.$Message('用户名不能为空');
			  return false;
		  }

		  if(this.password == ''){
			  this.$Message('密码不能为空');
			  return false;
		  }

		  if(this.$refs.Verify.isPassing == false){
			  this.$Message('请拖动验证码');
			  return false;
		  }

		  // 发送请求
		  this.axios.get('http://127.0.0.1:8000/login/',
		  {params: {
			  username:this.username,
			  password:this.password,
			  }}).then((result) =>{
				console.log(result);
				this.$Message(result.data.message);
				if(result.data.code == 200){

					// 将用户名/id/jwt存储到localstorage
					localStorage.setItem('username', result.data.username);
					localStorage.setItem('uid', result.data.uid);
					localStorage.setItem('jwt', result.data.jwt);

					// 跳转
					this.$router.push('/');
				} 
		  })
	  }
     
  }
}


</script>
 
<style>



</style>